<template>
	<hyb-page title="商品订单">
		<template v-slot:body>

			<view class="gui-order gui-bg-white gui-dark-bg-level-3">
				<view class="gui-text-small gui-secondary-text gui-padding-y gui-border-b">
					<view class="gui-flex">
						<text>{{order.o_address?.name || ''}} {{order.o_address?.phone || ''}}</text>
					</view>
					<view>
						{{order.o_address?.address || ''}}
					</view>
				</view>
				<view class="gui-flex gui-row gui-space-between gui-align-items-center gui-margin-top">
					<text class="gui-order-number gui-primary-text">订单号 : {{order.out_trade_no}}</text>
					<gui-tags :size="22" style="margin: 0;" :text="order.o_status"
						:customClass="['gui-bg-red','gui-color-white','gui-ellipsis']">
					</gui-tags>
				</view>
				<!-- 循环展示订单 -->
				<view v-for="(shop, indexShop) in order.shangjia" :key="indexShop" class="gui-border-b">
					<text class="gui-shop gui-primary-text gui-block">{{shop.s_name}}</text>
					<!-- 循环订单商品 -->

					<view v-for="(goods, indexGoods) in shop.goods" :key="indexGoods">
						<view class="gui-order-goods gui-flex gui-margin-top">
							<view class="gui-order-goods-img">
								<gui-image :src="goods.g_thumb" :width="120" :height="120"></gui-image>
							</view>
							<view class="gui-flex1">
								<view class="gui-flex">
									<text
										class="gui-order-goods-name gui-secondary-text gui-margin-x">{{goods.g_name}}</text>
									
								</view>
								<!-- 规格列表 -->
								<view v-for="(spec, specIdx) in (goods.expanded ? goods.specs : (goods.specs || []).slice(0, 2))" :key="specIdx" style="margin-left:20rpx;">
									<text v-if="spec.o_guige_name"
										class="gui-order-goods-guige gui-color-gray gui-margin-x-small gui-text-small">
										规格：{{spec.o_guige_name}}
									</text>
									<text class="gui-order-goods-price gui-color-red" style="margin-left: 20rpx;">
										￥{{spec.o_price}} x {{spec.o_count}}
									</text>
								</view>
								<!-- 如果规格超过2个，显示展开/收起按钮 -->
								<view v-if="(goods.specs || []).length > 2" style="margin-left:20rpx; margin-top: 5rpx;">
									<text class="gui-color-blue gui-text-small" @tap.stop="toggleSpecs(goods)">
										{{goods.expanded ? '收起' : `查看全部${goods.specs.length}个规格`}}
									</text>
								</view>
								<!-- 其他费用信息 -->
								<view v-if="goods.extra1_name && goods.extra1_name.trim()" style="margin-left:20rpx; margin-top: 10rpx;">
									<view v-for="(item, index) in goods.extra1_name.split('\n')" :key="index" class="gui-flex gui-align-items-center" style="margin-bottom: 5rpx;">
										<text class="gui-color-blue gui-margin-x-small gui-text-small">
											{{item}}
										</text>
										<text v-if="goods.extra1_tip && index === 0" class="gui-color-blue gui-icons gui-text-small" 
											style="margin-left: 10rpx;" @tap.stop="showTip('其他费用说明', goods.extra1_tip)">
											&#xe646;
										</text>
									</view>
								</view>
								<!-- 增值费用信息 -->
								<view v-if="goods.extra2_name && goods.extra2_name.trim()" style="margin-left:20rpx; margin-top: 10rpx;">
									<view v-for="(item, index) in goods.extra2_name.split('\n')" :key="index" class="gui-flex gui-align-items-center" style="margin-bottom: 5rpx;">
										<text class="gui-color-green gui-margin-x-small gui-text-small">
											{{item}}
										</text>
										<text v-if="goods.extra2_tip && index === 0" class="gui-color-green gui-icons gui-text-small" 
											style="margin-left: 10rpx;" @tap.stop="showTip('增值费用说明', goods.extra2_tip)">
											&#xe646;
										</text>
									</view>
								</view>
								<!-- <view style="text-align: right;">
									<text class="gui-order-goods-price gui-color-red">运费：￥{{goods.o_yunfei}} </text>
								</view> -->
							</view>
						</view>
					</view>



				</view>
                
				<view class="gui-text-small gui-secondary-text gui-padding-y gui-flex gui-space-between gui-border-b">
					<text>使用积分：{{order.o_jifen}}</text>
					<text>实付金额：￥{{format_money(order.o_money + order.o_yunfei -order.o_jifen_money)}}</text>
				</view>

				<view class="gui-text-small gui-secondary-text gui-padding-y gui-flex gui-border-b">
					<text>下单时间：{{order.o_xdtime}}</text>
				</view>

				<view v-if="order.fh_time"
					class="gui-text-small gui-secondary-text gui-padding-y gui-flex gui-border-b">
					<text>发货时间：{{order.fh_time}}</text>
				</view>

				<view v-if="order.kuaidi_name"
					class="gui-text-small gui-secondary-text gui-padding-y gui-flex gui-border-b">
					<text>快递信息：{{order.kuaidi_name}}/{{order.kuaidi_sn}}</text>
				</view>


				<view v-if="order.wc_time"
					class="gui-text-small gui-secondary-text gui-padding-y gui-flex gui-border-b">
					<text>完成时间：{{order.wc_time}}</text>
				</view>
                    <view v-if="order.extra">
                                    
                                   
                                    <view v-if="order.extra.truck_num">车牌号：
                                        <text class="gui-color-gray gui-margin-x-small gui-text-small">{{order.extra.truck_num}} </text>
                                    </view>
                                    <view v-if="order.extra.bill_num">提货单：
                                        <text class="gui-color-gray gui-margin-x-small gui-text-small">{{order.extra.bill_num}} </text>
                                    </view>
                                    <view v-if="order.extra.remark">备&ensp;&ensp;注：
                                        <text class="gui-color-gray gui-margin-x-small gui-text-small">{{order.extra.remark}} </text>
                                    </view>
                                </view> 


				<!-- 订单底部 -->
				<view class="gui-order-footer gui-padding">
					<view class="gui-text-small">

					</view>
				</view>
			</view>


		</template>
	</hyb-page>
</template>

<script>
	export default {
		data() {
			return {
				order: {
					o_address: {}
				}
			}
		},
		onLoad(options) {
			uni.gPost("goods/order/detail", {
				no: options.id || options.no // 兼容两种参数名
			}).then((order) => {
				// 确保o_address字段存在
				if (!order.o_address) {
					order.o_address = {};
				}
				// 确保shangjia字段存在
				if (!order.shangjia) {
					order.shangjia = [];
				}
				this.order = order;
			}).catch((err) => {
				console.error('获取订单详情失败:', err);
				uni.showToast({
					title: '获取订单详情失败',
					icon: 'none'
				});
			});
		},
		methods: {
			format_money(val) {
				return parseFloat(val).toFixed(2);
			},
			// 显示提示信息
			showTip(title, content) {
				// 检查内容是否为跳转链接
				if (content && content.trim()) {
					// 检查路径是否以 / 开头，如果没有则添加
					let jumpPath = content.trim();
					if (!jumpPath.startsWith('/')) {
						jumpPath = '/' + jumpPath;
					}
					
					// 进行页面跳转
					uni.navigateTo({
						url: jumpPath,
						fail: (err) => {
							console.error('页面跳转失败:', err);
							uni.showToast({
								title: '页面跳转失败',
								icon: 'none'
							});
						}
					});
				} else {
					// 如果没有跳转路径，显示提示
					uni.showToast({
						title: '暂无相关页面',
						icon: 'none'
					});
				}
			},
			// 切换规格展开/收起
			toggleSpecs(goods) {
				goods.expanded = !goods.expanded;
			}
		}
	}
</script>

<style>
	.gui-order {
		padding: 25rpx;
		margin: 25rpx;
		margin-bottom: 0rpx;
		border-radius: 10rpx;
	}

	.gui-order-number {
		line-height: 50rpx;
		font-size: 26rpx;
		width: 300rpx;
		flex: 1;
	}

	.gui-shop {
		line-height: 88rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.gui-order-goods {
		flex-direction: row;
		flex-wrap: nowrap;
		padding-bottom: 20rpx;
		align-items: flex-start;
	}

	.gui-order-goods-img {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.gui-order-goods-name {
		line-height: 50rpx;
		font-size: 28rpx;
	}

	.gui-order-goods-guige {
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.gui-order-goods-price {
		line-height: 50rpx;
		font-size: 28rpx;
	}

	.pay-card-radius {
		border-radius: 10rpx;
	}

	.gui-order-footer {
		margin-top: 2px;
	}

	.gui-order-status {
		line-height: 50rpx;
		font-size: 26rpx;
		width: 100rpx;
		text-align: center;
	}

	.gui-order-btn {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 22rpx;
		text-align: center;
		border-radius: 60rpx;
		margin-left: 20rpx;
	}

	.gui-order-btn-red {
		border-color: #FF0036;
		color: #FF0036;
	}

	.gui-empty-icon {
		font-size: 130rpx;
		line-height: 130rpx;
		margin-top: 200rpx;
	}
</style>